<template>
	<view class="container">
		<scroll-view scroll-y="true" class="scroll" @scrolltolower="scrolltolower">
			<view class="wrap" v-for="(item, index) in moviesList" :key="index">
				<view class="left"><image :src="item.images.small" mode="aspectFill"></image></view>
				<view class="right">
					<view class="title">
						{{ item.title }}
						<text class="scro">{{ item.rating.average || '即将上映' }}</text>
					</view>
					<view>{{ item.year }}</view>
					<view>{{ item.genres.join() }}</view>
				</view>
			</view>
			<view style="text-align: center;font-size: 16upx;color: #808080;" v-if="isShow">我是有底线的</view>
		</scroll-view>
	</view>
</template>

<script>
	import { comingSoon, newMoives, top250 } from '../../apis';
export default {
	data() {
		return {
			testList:["即将上映的电影","豆瓣电影新片榜","豆瓣电影Top250"],
			start:0,
			typeNum:-1,
			moviesList:[],
			isShow:false
		};
	},
	onLoad(option){
		uni.showLoading({
			title:"加载中"
		})
		console.log(option.title);
		this.typeNum = this.testList.indexOf(option.title);
		this.getClassData(this.typeNum)({
			start:"0",
			city:this.$store.state.city,
			count:"8"
		}).then((res)=>{
			let [err,data] = res;
			this.moviesList = data.data.subjects;
			uni.hideLoading();
		
		}).fail(err =>{
			
		console.log(err)
		})

	},
	methods:{
		scrolltolower(){
			uni.showLoading({
				title:"加载中",
				mask:true
			})
			this.start+=10;
			this.getClassData(this.typeNum)({
				start:this.start,
				city:this.$store.state.city,
				count:8
			}).then(res=>{
				let [err,data] = res;
				let subjects = data.data.subjects;
				if(subjects.length===0){
					this.isShow = true;
				}
				Array.prototype.push.apply(this.moviesList,subjects);
				//this.moviesList = data.data.subjects;
				uni.hideLoading();

			})
		},
		getClassData(state){
			let fnList=[comingSoon,newMoives,top250];
			//console.log(fnList)
			//console.log(fuList[0])
			return fnList[state];
		}
	}
};
</script>

<style lang="scss" scoped>
.container{
	overflow: hidden;
	.scroll{
		height: 667*2upx;
	}
	.wrap{
		display: flex;
		border-bottom: 1px solid #C8C7CC;
		padding: 20upx 30upx;
		.left{
			width:168upx;
			height:208upx;
			image{
				width:100%;
				height:100%;
			}
		}
		.right{
			flex:1;
			margin-left: 20upx;
			.title{
				font-size: 40upx;
				color:black;
			}
			view{
				font-size: 30upx;
				color:#C0C0C0;
			}
			.scro{
				background-color: rgba(247,76,49,1);
				padding: 2upx 6upx;
				border-radius: 6upx;
				color:#fff;
				float:right;
				font-size: 25upx;

			}
		}
	}
}
</style>
